<template>
  <div ref="chart"></div>
</template>

<script>
import * as echarts from "echarts";
import chartTheme from "../chartTheme";
export default {
  setup() {
    return { lineChart: {} };
  },
  computed: {
    theme() {
      return chartTheme[this.$store.state.theme];
    },
  },
  mounted() {
    this.lineChart = echarts.init(this.$refs.chart);
    const option = {
      textStyle: this.theme.textStyle,
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
       
      },
      yAxis: {
        type: "value",
        splitLine: {
            lineStyle: this.theme.splitLine.lineStyle,
            show: true,
          },
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };
    this.lineChart.setOption(option);
    const resizeObserver = new ResizeObserver((entries) => {
      this.lineChart.resize();
    });
    resizeObserver.observe(this.$refs.chart);
  },
};
</script>

<style></style>
